<template>
  <div>
    <aplayer :audio="audio" :lrcType="0" />
    <ul>
      <li @click="changeSong(item)" class="song" v-for="(item,index) in list" :key="item.id">
        <span>{{ index + 1 }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.artist }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Music",
  created() {
    this.getList()
  },
  data() {
    return {
      audio: {
        name: '东西（Cover：林俊呈）',
        artist: '纳豆',
        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
      },
      list: []
    };
  },
  props: {},
  methods: {
    getList() {
      this.axios.get('https://bird.ioliu.cn/netease/playlist?id=2037020941')
        .then(res => {
          console.log(res);
          this.list = res.data.playlist.tracks.map(item => {
            return {
              id: item.id,
              name: item.al.name,
              artist: item.ar[0].name,
              cover: item.al.picUrl
            }
          })
        })
    },
    changeSong(obj) {
      this.axios.get('https://bird.ioliu.cn/netease/song?id=' + obj.id)
        .then(res => {
          console.log(res);
          this.audio = { ...obj, url: res.data.data.mp3.url }
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.song {
  display: flex;
  justify-content: space-between;
  height: 30px;
  align-items: center;
  border-bottom: 1px dashed #000;
}
</style>